<!-- 没有授权，token过期跳转到此页面 -->
<template>
  <el-container class="page-container page-container__no-auth">
    <div class="no-auth-box">
      <h1 class="text-oops">Oops!</h1>
      <h2>您的页面已经失效了</h2>
      <p class="text-msg">您之所以会看到这个页面的原因是因为您之前访问的页面已失效了</p>
      <h4>您可以尝试以下方式解决:</h4>
      <ul class="list-unstyled">
        <li>
          点击
          <a href="javacript:;" class="link-style" @click="refreshAuth">刷新一下</a>
          再试试
        </li>
        <li>退出客户端后重新登录</li>
      </ul>
    </div>
    <img src="@/assets/img/no-auth.gif" alt="" />
  </el-container>
</template>

<script>
  import { getClientAuth } from '@/plugins/clientAuth';

  export default {
    methods: {
      async refreshAuth() {
        const clientAuthInfo = await getClientAuth(2);
        await this.$store.dispatch('user/setClientAuth', clientAuthInfo); // 设置由客户端携带的token和用户信息
        this.$router.push({ name: 'index' });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .page-container__no-auth {
    background: #ffffff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow: hidden;
  }
  .no-auth-box {
    margin-right: 60px;
  }
  .text-oops {
    font-size: 60px;
    font-weight: 700;
    color: #484848;
  }
  .text-msg {
    margin-bottom: 34px;
  }
  .list-unstyled {
    padding-left: 20px;
  }
  .link-style {
    color: #3770eb;
  }
</style>
